// out:../css/
@import './base.less';

@vw: 3.75vw;

.header {
    background-color: white;
    width: 100%;
    height: (50/@vw);
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    justify-content: space-between;
    padding: 0 (15/@vw) 0 (10/@vw);

    .collect {
        width: (235/@vw);
        height: (50/@vw);
        display: block;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .download {
        width: (80/@vw);
        height: (30/@vw);
        text-align: center;
        background-color: #ffe31b;
        border-radius: (15/@vw);
        line-height: (30/@vw);
    }

}

.alldemo {
    margin-top: (50/@vw);
    background-color: #f9fafb;
    width: 100%;
    padding: 0 (15/@vw) 0 (15/@vw);
}

.search {
    margin-top: (50/@vw);
    height: (52/@vw);
    justify-content: center;
    display: flex;
    align-items: center;

    p {
        line-height: (32/@vw);
        text-align: center;
        border-radius: (16/@vw);
        background-color: #f2f4f5;
        width: (345/@vw);
        height: (32/@vw);
        color: #a1a1a1;

        a {
            color: #a1a1a1
        }

        ;
    }
}

.pic {
    width: 100%;
    height: (108/@vw);
    display: flex;
   
    overflow: hidden;
    img {
        object-fit: cover;
        border-radius: (5/@vw);
        width: 100%;
        height: 100%;
    }
}

.charts {
    margin-top: (20/@vw);
    margin-bottom: (16/@vw);
    width: 100%;
    height: (26/@vw);
    display: flex;
    justify-content: space-between;

    h2 {
        font-size: (20/@vw);
    }

    p {
        line-height: (26/@vw);
        font-size: (12/@vw);

        color: #a1a1a1;

        a {
            color: #a1a1a1;
        }
    }

    ;
}

.ranking {
    width: 100%;
    height: (105/@vw);
    display: flex;
   margin-bottom: (15/@vw);
   background-color: white;
   border-radius: (10/@vw);

    img {
        border-radius: (5/@vw);
        width: (105/@vw);
        height: (105/@vw);
        margin-right: (15/@vw);
    }

    div {
     
        h4 {
            margin-top: (5/@vw);
            font-weight: normal
        }

        p {
            color: #a1a1a1;
            font-size: (12/@vw);
            margin-top: (8/@vw)
        }
    }

    ;

}

.recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .list {
        
        margin-bottom: (10/@vw);
        img{
            width: (105/@vw);
            height: (105/@vw);
            border-radius: (10/@vw);
        }
        p{
            width: (105/@vw);
            height: (38/@vw);
        }
        h5 {
            position: relative;
            a{
                border-radius:0 (10/@vw) 0 (10/@vw);
                padding: (5/@vw) (10/@vw) (5/@vw) (10/@vw);
                background-color: #2b1f24;
                color: white;
                bottom: (0/@vw);
                left: (0/@vw);
                position: absolute;
            }
        }
       
    }
}

.install {
    padding: (5/@vw) (10/@vw) (5/@vw) (10/@vw);
    border-radius: (22.5/@vw);
    background-color: white;
    position: fixed;
    bottom: (10/@vw);
    width: (345/@vw);
    height: (45/@vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
     .logo {
        display: flex;
        align-items: center;
        img {
            width: (36/@vw);
            height: (36/@vw)
        };
     };


     p{
        a{
            font-size: (12/@vw);
            border-radius: (16/@vw);
            padding: (8/@vw);
            width: (32/@vw);
            height: (32/@vw);
            background-color: #f2f3f5;
        }
     }
}